<template>
    <div>
        <div class='editdetail activity-right'>
            <h3>仓库管理</h3>
            <el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="仓库名称:" prop="storeName">
                    <el-input class='input' v-model="ruleForm.storeName" prop="storeName"></el-input>
                </el-form-item>
                <el-form-item label="仓库地址:" prop="location">
                    <el-input class='input' v-model="ruleForm.location" prop="location"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" prop="phoneNumber">
                    <el-input class='input' v-model="ruleForm.phoneNumber" prop="phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="仓库介绍:" prop="storeIntro">
                    <el-input type='textarea' :rows="5" class='input' v-model="ruleForm.storeIntro"></el-input>
                </el-form-item>
                <el-form-item label="邮费(元):" prop="postage">
                    <el-input class='input' v-model="ruleForm.postage" prop="postage"></el-input>
                </el-form-item>
                <el-form-item label="仓库品牌:" prop="brand">
                    <div class="selGoods input" style="margin-top:10px;">
                        <section>
                            <ul>
                                <li :key="item.id" v-for="item in addBrandVal" style="display:inline-block; margin:0 5px;">
                                    <span>{{ item.name }}</span>
                                    <i title="删除" @click="deleteBrand(item.id ? item.id : item.brand_id,$event)" class="el-icon-close"></i>
                                </li>
                            </ul>
                        </section>
                    </div>
                    <el-button type="primary" @click="handleClick">选择品牌</el-button>
                </el-form-item>
                <el-form-item class='right-btn'>
                    <el-button class='' type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button class='' type="primary" @click="goBack">返回</el-button>
                </el-form-item>
            </el-form>
            <transition name="fade">
                <div class="popup-detail" v-loading="tableLoading" v-if="isShow">
                    <div class="selGoods">
                        <h3>选择品牌</h3>
                        <section>
                            <ul>
                                <li :key="item.id" v-for="item in addBrandVal" style="display:inline-block">
                                    <span>{{item.name}}</span>
                                    <i title="删除" @click="deleteBrand(item.id,$event)" class="el-icon-close"></i>
                                </li>
                            </ul>
                        </section>
                    </div>
                    <div class="searchList">
                        <el-table class="table-common" ref="multipleTable" :data="searchList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>>
                            <el-table-column label="品牌名称" width="120">
                                <template slot-scope="scope">{{ scope.row.name }}</template>
                            </el-table-column>
                            <el-table-column prop="url" label="品牌图片" width="120">
                                <template slot-scope="scope">
                                    <img :src="scope.row.url" alt="">
                                </template>

                            </el-table-column>
                            <el-table-column prop="story" label="品牌历史" show-overflow-tooltip>
                                <template slot-scope="scope">{{ scope.row.story }}</template>

                            </el-table-column>

                            <el-table-column prop="createTime" label="创立时间" show-overflow-tooltip>
                                <template slot-scope="scope">{{ $formate(scope.row.createTime,'yyyy-MM-dd') }}</template>
                            </el-table-column>
                        </el-table>
                        <section class="pagination" v-if="total > 5">
                            <template v-if="page == 1">
                                <el-button type="primary" disabled>上一页</el-button>
                            </template>
                            <template v-else>
                                <el-button type="primary" @click="pagePrev">上一页</el-button>
                            </template>
                            <template v-if="Math.ceil(total/5) <= page">
                                <el-button type="primary" disabled>下一页</el-button>
                            </template>
                            <template v-else>
                                <el-button type="primary" @click="pageNext">下一页</el-button>
                            </template>
                        </section>
                        <section class="bottomAdd" style="margin-top:20px;">
                            <el-button type="primary" @click="addBrand">增加</el-button>
                            <el-button :type="nowSelList && nowSelList.length > 0 ? 'primary' : 'info'" @click="selDone">选择完毕</el-button>
                        </section>
                    </div>
                    <i class="el-icon-circle-close-outline close" title="关闭" @click="close"></i>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
import leftBar from "../commonComponents/leftBar.vue";
import { getStoreByStroreNo, getBrand, editStore } from "../../data/postData";
export default {
    components: {
        leftBar
    },
    mounted() {
        var params = {
            data: {
                storeNo: this.user.storeNo
            }
        };
        this.$fetch.post(getStoreByStroreNo, params).then(res => {
            this.ruleForm = res.data;
            this.addBrandVal = res.data.barndList || [];
        });
    },
    data() {
        return {
            labelPosition: "right",
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            ruleForm: {
                storeName: "",
                location: "",
                phoneNumber: "",
                storeIntro: "",
                postage: "",
                barndList: [],
                name: "",
                mobile: "",
                password: "",
                storeNo: "",
                storeId: ""
            },
            isShow: false,
            total: "",
            addBrandVal: [],
            nowSelList: null,
            tableLoading: false,
            searchList: null,
            rules: {
                storeName: [
                    { required: true, message: "选择仓库名称", trigger: "blur" }
                ],

                postage: [{ required: true, message: "邮费", trigger: "blur" }],
                location: [
                    { required: true, message: "选择地址", trigger: "blur" }
                ],
                phoneNumber: [
                    {
                        required: true,
                        message: "仓库联系电话",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            if (
                                /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(
                                    value
                                ) == false
                            ) {
                                callback(new Error("输入格式不正确"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                brand: [
                    { required: true, message: "选择仓库品牌", trigger: "blur" }
                ],
                storeIntro: [
                    { required: true, message: "仓库介绍", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        selDone() {
            this.addBrand();
            this.close();
        },
        // 品牌
        addBrand() {
            let need = [];
            let that = this;
            let arr1 = [];
            let now = [];
            if (this.nowSelList.length > 0) {
                if (this.addBrandVal.length > 0) {
                    now = this.addBrandVal.concat(this.nowSelList);
                    var unique = {};
                    now.forEach(function(gpa) {
                        unique[JSON.stringify(gpa)] = gpa;
                    });
                    now = Object.keys(unique).map(function(u) {
                        return JSON.parse(u);
                    });
                    this.addBrandVal = now;
                } else {
                    this.addBrandVal = this.addBrandVal.concat(this.nowSelList);
                }
            }
            this.$refs.multipleTable.clearSelection();
            this.nowSelList = "";
        },
        handleSelectionChange(val) {
            this.nowSelList = val;
        },
        close() {
            this.$confirm("确认关闭吗？")
                .then(_ => {
                    this.isShow = false;
                })
                .catch(_ => {});
        },
        deleteBrand(id, e) {
            this.addBrandVal.forEach((val, i) => {
                if (val.id == id) {
                    this.addBrandVal.splice(i, 1);
                }
            });
        },
        handleClick() {
            this.isShow = true;
            var params = {
                data: {}
            };
            this.$fetch.post(getBrand, params).then(res => {
                this.searchList = res.data;
            });
        },
        goBack() {
            //this.$router.go(-1)
            this.$router.push({ path: "/goodsList" });
        },
        submitForm() {
            this.ruleForm.barndList = [];
            if (this.addBrandVal.length > 0) {
                this.addBrandVal.forEach((val, i) => {
                    this.ruleForm.barndList.push(val.id.toString());
                });
            }
            let params = {
                data: {
                    storeNo: this.ruleForm.storeNo,
                    storeId: this.ruleForm.storeId.toString(),
                    storeName: this.ruleForm.storeName,
                    location: this.ruleForm.location,
                    phoneNumber: this.ruleForm.phoneNumber,
                    storeIntro: this.ruleForm.storeIntro,
                    postage: this.ruleForm.postage.toString(),
                    barndList: this.ruleForm.barndList
                }
            };
            if (this.ruleForm.storeName == "") {
                this.$message({
                    message: "请填写仓库名称",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.ruleForm.location == "") {
                this.$message({
                    message: "请填写仓库地址",
                    type: "warning",
                    duration: 1000
                });
            } else if (
                this.ruleForm.phoneNumber == "" ||
                /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(
                    this.ruleForm.phoneNumber
                ) == false
            ) {
                this.$message({
                    message: "请填写仓库电话",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.ruleForm.storeIntro == "") {
                this.$message({
                    message: "请填写仓库介绍",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.ruleForm.postage == "") {
                this.$message({
                    message: "请填写运费",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.ruleForm.barndList.length < 1) {
                this.$message({
                    message: "请选择仓库品牌",
                    type: "warning",
                    duration: 1000
                });
            } else {
                this.$confirm("确认保存？").then(_ => {
                    this.$fetch
                        .post(editStore, params)
                        .then(res => {
                            setTimeout(() => {
                                this.$message({
                                    message: res.message,
                                    type: "success",
                                    duration: 1000
                                });
                                setTimeout(() => {
                                    this.$router.push({ path: "/goodsList" });
                                }, 1500);
                            }, 500);
                        })
                        .catch(err => {
                            this.$message({
                                message: err.message,
                                type: "warning"
                            });
                        });
                });
            }
        }
    }
};
</script>
<style scoped lang='less'>
.editdetail {
    width: calc(~"100% - 250px");
    margin-top: 5%;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 20px;
    }
    .input {
        width: 33%;
    }
    .right-btn {
        position: absolute;
        right: 10%;
    }
}
.selGoods {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    section {
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
    }
}
</style>
